<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<title>商品页面</title>

		<link href="static/css/admin.css" rel="stylesheet" type="text/css" />
		<link href="static/css/amazeui.css" rel="stylesheet" type="text/css" />
		<link href="static/css/demo.css" rel="stylesheet" type="text/css" />
		<link type="text/css" href="static/css/optstyle.css" rel="stylesheet" />
		<link type="text/css" href="static/css/style.css" rel="stylesheet" />
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		
		<script type="text/javascript" src="static/js/jquery-1.7.min.js"></script>
		<!-- 引入 layui.css -->
		<link rel="stylesheet" href="//unpkg.com/layui@2.6.5/dist/css/layui.css">
		<!-- 引入 layui.js -->
		<script src="//unpkg.com/layui@2.6.5/dist/layui.js"></script>

		<script type="text/javascript" src="static/js/quick_links.js"></script>
		<script type="text/javascript" src="static/js/amazeui.js"></script>
		<script type="text/javascript" src="static/js/jquery.imagezoom.min.js"></script>
		<script type="text/javascript" src="static/js/jquery.flexs lider.js"></script>

	</head>

	<body>
		<div id="container">
			<!--顶部导航条 -->
			<div class="am-container header">
				<ul class="message-l">
					<div class="topMessage">
						<div v-if="isLogin" class="menu-hd">
							{{username}},欢迎您！
						</div>
						<div v-else class="menu-hd">
							<a href="#" target="_top" class="h">亲，请登录</a>
							<a href="#" target="_top">免费注册</a>
						</div>
					</div>
				</ul>
				<ul class="message-r">
					<div class="topMessage home">
						<div class="menu-hd">
							<a href="index.html" target="_top" class="h">商城首页</a>
						</div>
					</div>
					<div class="topMessage mini-cart">
						<div class="menu-hd">
							<a id="mc-menu-hd" href="shopcart.html" target="_top">
								<i class="am-icon-shopping-cart  am-icon-fw"></i>
								<span>购物车</span>
								<strong id="J_MiniCartNum" class="h">0</strong>
							</a>
						</div>
					</div>
				</ul>
			</div>
			<!--悬浮搜索框-->
			<div class="nav white">
				<div class="logoBig">
					<li><img src="static/images/logo.png" style="width:200px; height: 100px"/></li>
				</div>
				<div class="search-bar pr">
					<a name="index_none_header_sysc" href="#"></a>
					<form>
						<input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索" autocomplete="off"/>
						<input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit"/>
					</form>
				</div>
			</div>
			<div class="clear"></div>

			<b class="line"></b>

			<div class="listMain">
				<!--分类-->
				<div class="nav-table">
					<div class="long-title">
						<span class="all-goods">全部分类</span>
					</div>
					<div class="nav-cont">
						<ul>
							<li class="index"><a href="#">首页</a></li>
							<li class="qc"><a href="#">闪购</a></li>
							<li class="qc"><a href="#">限时抢</a></li>
							<li class="qc"><a href="#">团购</a></li>
							<li class="qc last"><a href="#">大包装</a></li>
						</ul>
						<div class="nav-extra">
							<i class="am-icon-angle-right" style="padding-left: 10px;"></i>
						</div>
					</div>
				</div>
				<ol class="am-breadcrumb am-breadcrumb-slash">
					<li><a href="#">首页</a></li>
					<li><a href="#">分类</a></li>
					<li class="am-active">内容</li>
				</ol>
				<script type="text/javascript">
					$(function() {});
					$(window).load(function() {
					$('.flexslider').flexslider({
						animation: "slide",
						start: function(slider) {
								$('body').removeClass('loading');
							}
						});
					});
				</script>
				<div class="scoll">
					<section class="slider">
						<div class="flexslider">
							<ul class="slides">
								<li>
									<img src="static/images/01.jpg" title="pic" />
								</li>
								<li>
									<img src="static/images/02.jpg" />
								</li>
								<li>
									<img src="static/images/03.jpg" />
								</li>
							</ul>
						</div>
					</section>
				</div>

				<!--放大镜-->
				<div class="item-inform">
					<div class="clearfixLeft" id="clearcontent">
						<div class="box">
							<template v-if="productImgs.length>0">
								<div  class="tb-booth tb-pic tb-s310">
									<a href="static/images/01.jpg">
										<img :src="'static/pimgs/'+productImgs[0].url" alt="细节展示放大镜特效" :rel="'static/pimgs/'+productImgs[0].url" class="jqzoom" />
									</a>
								</div>
							</template>
							<ul class="tb-thumb" id="thumblist">
								<template v-for="img,index in productImgs">
									<li :class="{'tb-selected':index==0}">
										<div class="tb-pic tb-s40">
											<a href="#"><img :src="'static/pimgs/'+img.url" :mid="'static/pimgs/'+img.url" :big="'static/pimgs/'+img.url"></a>
										</div>
									</li>
								</template>
							</ul>
						</div>
						<div class="clear"></div>
					</div>
					<div class="clearfixRight">
					<!--规格属性-->
					<!--名称-->
						<div class="tb-detail-hd">
							<h1>{{product.productName}}</h1>
						</div>
						<div class="tb-detail-list">
							<!--价格-->
							<div class="tb-detail-price">
								<li class="price iteminfo_price">
									<dt>促销价</dt>
									<dd>
										<em>¥</em><b class="sys_item_price">{{productSkus[currentSkuIndex].sellPrice}}</b>
									</dd>
								</li>
								<li class="price iteminfo_mktprice">
									<dt>原价</dt>
									<dd>
										<em>¥</em><b class="sys_item_mktprice">{{productSkus[currentSkuIndex].originalPrice}}</b>
									</dd>
								</li>
								<div class="clear"></div>
							</div>
							<!--地址-->
							<dl class="iteminfo_parameter freight">
								<dt>配送至</dt>
								<div class="iteminfo_freprice">
									<div class="am-form-content address">
										<select data-am-selected>
											<option value="a">浙江省</option>
											<option value="b">湖北省</option>
										</select>
										<select data-am-selected>
											<option value="a">温州市</option>
											<option value="b">武汉市</option>
										</select>
										<select data-am-selected>
											<option value="a">瑞安区</option>
											<option value="b">洪山区</option>
										</select>
									</div>
									<div class="pay-logis">
										快递<b class="sys_item_freprice">10</b>元
									</div>
								</div>
							</dl>
							<div class="clear"></div>
							<!--销量-->
							<ul class="tm-ind-panel">
								<!--<li class="tm-ind-item tm-ind-sellCount canClick">
                               	 <div class="tm-indcon"><span class="tm-label">月销量</span><span class="tm-count">1015</span></div>
                            	</li>-->
								<li class="tm-ind-item tm-ind-sumCount canClick">
									<div class="tm-indcon">
										<span class="tm-label">累计销量</span>
										<span class="tm-count">{{product.soldNum}}</span>
									</div>
								</li>
								<li class="tm-ind-item tm-ind-reviewCount canClick tm-line3">
									<div class="tm-indcon">
										<span class="tm-label">累计评价</span>
										<span class="tm-count">640</span>
									</div>
								</li>
							</ul>
							<div class="clear"></div>

							<!--各种规格-->
							<div class="iteminfo_parameter sys_item_specpara">
								<dt class="theme-login"><div class="cart-title">可选规格<span class="am-icon-angle-right"></span></div></dt>
								<dd>
									<!--操作页面-->
									<div class="theme-popover-mask"></div>
									<div class="theme-popover">
										<div class="theme-span"></div>
										<div class="theme-poptit">
											<a href="javascript:;" title="关闭" class="close">×</a>
										</div>
										<div class="theme-popbod dform">
											<form class="theme-signin" name="loginform" action="" method="post">
												<div class="theme-signin-left">
													<!--显示商品套餐名选项（当套餐数量>1时显示）-->
													<div v-if="productSkus.length > 1" class="theme-options">
														<div class="cart-title">套餐</div>
														<ul>
															<template v-for="sku,index in productSkus">
																<!--如果当前套餐是正在显示的套餐，则添加选中效果-->
																<li v-if="index==currentSkuIndex" class="sku-line selected" :data-index="index" @click="changeSku">{{sku.skuName}}<i></i></li>
																<!--否则不添加选中效果-->
																<li v-else class="sku-line"  :data-index="index" @click="changeSku">{{sku.skuName}}<i></i></li>
															</template>
														</ul>
													</div>
													<!--显示当前套餐下的属性  skuProps  对象/Map-->
													<div id="props">
														<div v-for="(value,key) in skuProps" class="theme-options" >
															<div class="cart-title">{{key}}</div>
															<ul>
																<template v-for="v,index in value">
																	<li :class="{'sku-line':true,'selected':index==0}" :name="key"  @click="changeProp"
																		:data-key="key" :data-v="v">{{v}}</li>
																</template>
															</ul>
														</div>
													</div>
													<div class="theme-options">
														<div class="cart-title number">数量</div>
<!--															<dd>-->
																<input id="min" class="am-btn am-btn-default"  type="button" value="-" @click="changeNum(-1)"/>
																<input id="text_box" type="text" v-model="num" style="width:30px;" />
																<input id="add" class="am-btn am-btn-default"  type="button" value="+"  @click="changeNum(1)"/>
																<span id="stock1" class="tb-hidden">库存<span class="stock">{{productSkus[currentSkuIndex].stock}}</span>件</span>
<!--															</dd>-->
<!--															<div>-->
													</div>
													<div>
													<div class="clear"></div>
													<div class="btn-op">
														<div class="btn am-btn am-btn-warning">确认</div>
														<div class="btn close am-btn am-btn-warning">取消</div>
													</div>
												</div>
												<div class="theme-signin-right">
													<div class="img-info">
														<img src="static/images/songzi.jpg" />
													</div>
													<div class="text-info">
														<span class="J_Price price-now">¥39.00</span>
														<span id="Stock" class="tb-hidden">库存<span class="stock">1000</span>件</span>
													</div>
												</div>
											</form>
										</div>
									</div>
								</dd>
							<div class="clear"></div>
							<!--活动	-->
							<div class="shopPromotion gold">
								<div class="hot">
									<dt class="tb-metatit">折扣</dt>
									<div class="gold-list">
										<p>当前套餐享{{productSkus[currentSkuIndex].discounts*10}}折优惠<!--<span>点击领券<i class="am-icon-sort-down"></i></span>--></p>
									</div>
								</div>
								<div class="clear"></div>
								<div class="coupon">
									<dt class="tb-metatit">优惠券</dt>
									<div class="gold-list">
										<ul>
											<li>125减5</li>
											<li>198减10</li>
											<li>298减20</li>
										</ul>
									</div>
								</div>
							</div>
							</div>>
						</div>
						<div class="pay">
							<div class="pay-opt">
								<a href="home.html"><span class="am-icon-home am-icon-fw">首页</span></a>
								<a><span class="am-icon-heart am-icon-fw">收藏</span></a>
							</div>
							<li>
								<div class="clearfix tb-btn tb-btn-buy theme-login">
									<a id="LikBuy" title="点此按钮到下一步确认购买信息" href="#">立即购买</a>
								</div>
							</li>
							<li>
								<div class="clearfix tb-btn tb-btn-basket theme-login">
									<a id="LikBasket" title="加入购物车" @click="addShopCart"><i></i>加入购物车</a>
								</div>
							</li>
						</div>
					</div>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
				<!-- introduce-->
				<div class="introduce">
					<div class="browse">
						<div class="mc">
							<ul>
								<div class="mt">
									<h2>看了又看</h2>
								</div>

								<li class="first">
									<div class="p-img">
										<a  href="#"> <img class="" src="static/images/browse1.jpg"> </a>
									</div>
									<div class="p-name"><a href="#">【三只松鼠_开口松子】零食坚果特产炒货东北红松子原味</a></div>
									<div class="p-price"><strong>￥35.90</strong></div>
								</li>
								<li>
									<div class="p-img">
										<a  href="#"> <img class="" src="static/images/browse1.jpg"> </a>
									</div>
									<div class="p-name"><a href="#">【三只松鼠_开口松子】零食坚果特产炒货东北红松子原味</a></div>
									<div class="p-price"><strong>￥35.90</strong></div>
								</li>
								<li>
									<div class="p-img">
										<a  href="#"> <img class="" src="static/images/browse1.jpg"> </a>
									</div>
									<div class="p-name"><a href="#">【三只松鼠_开口松子】零食坚果特产炒货东北红松子原味</a></div>
									<div class="p-price"><strong>￥35.90</strong></div>
								</li>
								<li>
									<div class="p-img">
										<a  href="#"> <img class="" src="static/images/browse1.jpg"> </a>
									</div>
									<div class="p-name"><a href="#">【三只松鼠_开口松子】零食坚果特产炒货东北红松子原味</a></div>
									<div class="p-price"><strong>￥35.90</strong></div>
								</li>
								<li>
									<div class="p-img">
										<a  href="#"> <img class="" src="static/images/browse1.jpg"> </a></div>
									<div class="p-name"><a href="#">【三只松鼠_开口松子218g】零食坚果特产炒货东北红松子原味</a></div>
									<div class="p-price"><strong>￥35.90</strong></div>
								</li>
							</ul>
						</div>
					</div>
					<div class="introduceMain">
						<div class="am-tabs" data-am-tabs>
							<ul class="am-avg-sm-3 am-tabs-nav am-nav am-nav-tabs">
								<li class="am-active">
									<a href="#"><span class="index-needs-dt-txt">宝贝详情</span></a>
								</li>
								<li>
									<a href="#"><span class="index-needs-dt-txt">全部评价</span></a>
								</li>
								<li>
									<a href="#"><span class="index-needs-dt-txt">猜你喜欢</span></a>
								</li>
							</ul>
							<div class="am-tabs-bd">
								<!--商品参数和商品细节-->
								<div class="am-tab-panel am-fade am-in am-active">
									<div class="J_Brand">
										<div class="attr-list-hd tm-clear">
											<h4>产品参数：</h4>
										</div>
										<div class="clear"></div>
										<ul id="J_AttrUL">
											<li title="">产地:&nbsp;{{productParams.productPlace}}</li>
											<li title="">保质期:&nbsp;{{productParams.footPeriod}}</li>
											<li title="">品牌:&nbsp;{{productParams.brand}}</li>
											<li title="">生产厂商:&nbsp;{{productParams.factoryName}}</li>
											<li title="">生产地址:&nbsp;{{productParams.factoryAddress}}</li>
											<li title="">包装方式:&nbsp;{{productParams.packagingMethod}}</li>
											<li title="">规格重量:&nbsp;{{productParams.weight}}</li>
											<li title="">储存方式：&nbsp;{{productParams.storageMethod}}</li>
											<li title="">食用方式：&nbsp;{{productParams.eatMethod}} </li>
										</ul>
										<div class="clear"></div>
									</div>
									<div class="details">
										<div class="attr-list-hd after-market-hd">
											<h4>商品细节</h4>
										</div>
										<div class="twlistNews" >
											<span v-html="product.content"></span>
										</div>
									</div>
									<div class="clear"></div>
								</div>

								<!--商品评价-->
								<div class="am-tab-panel am-fade">
									<div class="actor-new">
										<!--							<div class="rate">-->
										<!--								<strong>{{commontsCountMap.percent}}<span>%</span></strong><br> <span>好评度</span>-->
										<!--							</div>-->
										<dl>
											<dt>买家印象</dt>
											<dd class="p-bfc">
												<q class="comm-tags"><span>味道不错</span><em>(2177)</em></q>
												<q class="comm-tags"><span>颗粒饱满</span><em>(1860)</em></q>
												<q class="comm-tags"><span>口感好</span><em>(1823)</em></q>
												<q class="comm-tags"><span>商品不错</span><em>(1689)</em></q>
												<q class="comm-tags"><span>香脆可口</span><em>(1488)</em></q>
												<q class="comm-tags"><span>个个开口</span><em>(1392)</em></q>
												<q class="comm-tags"><span>价格便宜</span><em>(1119)</em></q>
												<q class="comm-tags"><span>特价买的</span><em>(865)</em></q>
												<q class="comm-tags"><span>皮很薄</span><em>(831)</em></q>
											</dd>
										</dl>
									</div>
									<div class="clear"></div>
									<div class="tb-r-filter-bar">
										<ul class=" tb-taglist am-avg-sm-4">
											<li class="tb-taglist-li tb-taglist-li-current">
												<div class="comment-info">
													<span>全部评价</span>
													<span class="tb-tbcr-num">1100</span>
												</div>
											</li>

											<li class="tb-taglist-li tb-taglist-li-1">
												<div class="comment-info">
													<span>好评</span>
													<span class="tb-tbcr-num">10%</span>
												</div>
											</li>

											<li class="tb-taglist-li tb-taglist-li-0">
												<div class="comment-info">
													<span>中评</span>
													<span class="tb-tbcr-num">10%</span>
												</div>
											</li>

											<li class="tb-taglist-li tb-taglist-li--1">
												<div class="comment-info">
													<span>差评</span>
													<span class="tb-tbcr-num">10%</span>
												</div>
											</li>
										</ul>
									</div>
									<div class="clear"></div>

									<ul class="am-comments-list am-comments-list-flip">
										<template v-for="commont in productCommonts">
											<li class="am-comment">
												<!-- 评论容器 -->
												<a href="">
													<!-- 评论者头像 -->
													<img class="am-comment-avatar" :src="'static/'+commont.userImg" />
												</a>
												<div class="am-comment-main">
													<!-- 评论内容容器 -->
													<header class="am-comment-hd">
														<!--<h3 class="am-comment-title">评论标题</h3>-->
														<div class="am-comment-meta">
															<!-- 评论元数据 -->
															<a href="#link-to-user" v-if="commont.username" class="am-comment-author">
																{{commont.username.substring(0,2)+'*****'+ commont.username.substring(commont.username.length-1) }}
																<span v-if="commont.isAnonymous == 1">(匿名)</span>
																<span v-else>({{commont.nickname}})</span>
															</a>
															<!-- 评论者 -->
															评论于
															<time datetime="" v-if="commont.sepcName">{{commont.sepcName.substring(0,10)}}</time>
														</div>
													</header>

													<div class="am-comment-bd">
														<div class="tb-rev-item " data-id="255776406962">
															<div class="J_TbcRate_ReviewContent tb-tbcr-content ">
																{{commont.commContent}}
															</div>
															<!--<div class="tb-r-act-bar">
                                                                颜色分类：柠檬黄&nbsp;&nbsp;尺码：S
                                                                </div>-->
															<div v-if="commont.replyStatus==1" class="tb-r-act-bar">
																<hr>
																<label style="color: gray; font-weight: bold;">商家回复：</label>
																<time datetime="">回复于{{commont.replyTime.substring(0,10)}}</time>
																<br/>
																{{commont.replyContent}}
															</div>
														</div>
													</div>
													<!-- 评论内容 -->
												</div>
											</li>
										</template>
									</ul>

									<div class="clear"></div>
									<div class="clear"></div>

									<div class="tb-reviewsft">
										<div class="tb-rate-alert type-attention">购买前请查看该商品的 <a href="#" target="_blank">购物保障</a>，明确您的售后保障权益。</div>
										<div class="clear"></div>
										<!--分页 -->
										<ul class="am-pagination am-pagination-right">
											<li class="am-disabled"><a href="#">&laquo;</a></li>
											<li class="am-active"><a href="#">1</a></li>
											<li><a href="#">2</a></li>
											<li><a href="#">3</a></li>
											<li><a href="#">4</a></li>
											<li><a href="#">6</a></li>
											<li><a href="#">&raquo;</a></li>
										</ul>
										<div class="clear"></div>
									</div>
								</div>
								<!--猜你喜欢-->
								<div class="am-tab-panel am-fade">
									<div class="like">
										<ul class="am-avg-sm-2 am-avg-md-3 am-avg-lg-4 boxes">
											<li>
												<div class="i-pic limit">
													<img src="static/images/imgsearch1.jpg" />
													<p>【良品铺子_开口松子】零食坚果特产炒货
														<span>东北红松子奶油味</span>
													</p>
													<p class="price fl">
														<b>¥</b>
														<strong>298.00</strong>
													</p>
												</div>
											</li>
											<li>
												<div class="i-pic limit">
													<img src="static/images/imgsearch1.jpg" />
													<p>【良品铺子_开口松子】零食坚果特产炒货
														<span>东北红松子奶油味</span></p>
													<p class="price fl">
														<b>¥</b>
														<strong>298.00</strong>
													</p>
												</div>
											</li>
											<li>
												<div class="i-pic limit">
													<img src="static/images/imgsearch1.jpg" />
													<p>【良品铺子_开口松子】零食坚果特产炒货
														<span>东北红松子奶油味</span></p>
													<p class="price fl">
														<b>¥</b>
														<strong>298.00</strong>
													</p>
												</div>
											</li>
											<li>
												<div class="i-pic limit">
													<img src="static/images/imgsearch1.jpg" />
													<p>【良品铺子_开口松子】零食坚果特产炒货
														<span>东北红松子奶油味</span></p>
													<p class="price fl">
														<b>¥</b>
														<strong>298.00</strong>
													</p>
												</div>
											</li>
											<li>
												<div class="i-pic limit">
													<img src="static/images/imgsearch1.jpg" />
													<p>【良品铺子_开口松子】零食坚果特产炒货
														<span>东北红松子奶油味</span></p>
													<p class="price fl">
														<b>¥</b>
														<strong>298.00</strong>
													</p>
												</div>
											</li>
											<li>
												<div class="i-pic limit">
													<img src="static/images/imgsearch1.jpg" />
													<p>【良品铺子_开口松子】零食坚果特产炒货
														<span>东北红松子奶油味</span></p>
													<p class="price fl">
														<b>¥</b>
														<strong>298.00</strong>
													</p>
												</div>
											</li>
											<li>
												<div class="i-pic limit">
													<img src="static/images/imgsearch1.jpg" />
													<p>【良品铺子_开口松子】零食坚果特产炒货
														<span>东北红松子奶油味</span></p>
													<p class="price fl">
														<b>¥</b>
														<strong>298.00</strong>
													</p>
												</div>
											</li>
											<li>
												<div class="i-pic limit">
													<img src="static/images/imgsearch1.jpg" />
													<p>【良品铺子_开口松子】零食坚果特产炒货
														<span>东北红松子奶油味</span></p>
													<p class="price fl">
														<b>¥</b>
														<strong>298.00</strong>
													</p>
												</div>
											</li>
											<li>
												<div class="i-pic limit">
													<img src="static/images/imgsearch1.jpg" />
													<p>【良品铺子_开口松子】零食坚果特产炒货
														<span>东北红松子奶油味</span></p>
													<p class="price fl">
														<b>¥</b>
														<strong>298.00</strong>
													</p>
												</div>
											</li>
											<li>
												<div class="i-pic limit">
													<img src="static/images/imgsearch1.jpg" />
													<p>【良品铺子_开口松子】零食坚果特产炒货
														<span>东北红松子奶油味</span>
													</p>
													<p class="price fl">
														<b>¥</b>
														<strong>298.00</strong>
													</p>
												</div>
											</li>
											<li>
												<div class="i-pic limit">
													<img src="static/images/imgsearch1.jpg" />
													<p>【良品铺子_开口松子】零食坚果特产炒货
														<span>东北红松子奶油味</span></p>
													<p class="price fl">
														<b>¥</b>
														<strong>298.00</strong>
													</p>
												</div>
											</li>
											<li>
												<div class="i-pic limit">
													<img src="static/images/imgsearch1.jpg" />
													<p>【良品铺子_开口松子】零食坚果特产炒货
														<span>东北红松子奶油味</span></p>
													<p class="price fl">
														<b>¥</b>
														<strong>298.00</strong>
													</p>
												</div>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="clear"></div>
					<div class="footer">
						<div class="footer-hd">
							<p>
								<a href="#">海淘宝商城</a>
								<b>|</b>
								<a href="#">商城首页</a>
								<b>|</b>
								<a href="#">支付宝</a>
								<b>|</b>
								<a href="#">物流</a>
							</p>
						</div>
						<div class="footer-bd">
							<p>
								<a href="#">关于海淘宝</a>
								<a href="#">合作伙伴</a>
								<a href="#">联系我们</a>
								<a href="#">网站地图</a>
								<em>©haitaobao.com 版权所有</em>
							</p>
						</div>
					</div>
				</div>
			</div>
		<script type="text/javascript" src="static/js/vue.js" ></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script type="text/javascript" src="static/js/cookie_utils.js" ></script>
		<script type="text/javascript" src="static/js/axios.min.js" ></script>
		<script type="text/javascript" src="static/js/utils.js" ></script>
		<script type="text/javascript" src="static/js/list.js"></script>
		<script type="text/javascript">
			//引入layer做弹窗提示
			var layer;
			layui.use('layer',function () {
				layer=layui.layer;
			});

			var baseUrl = "http://127.0.01:8080/haitaobao/product";
			var vm=new Vue({
				el:"#container",
				data:{
					productId:"",
					product:{
						productName:"",//让vue进行初次渲染是有数据显示，防止页面闪避
						soldNum:0
					},
					productImgs:[],
					productSkus:[],
					currentSkuIndex:0, //当前选择的套餐的索引(默认为0）
					skuProps:{} ,//相当于一个map,代表套餐的属性
					productParams:{},//商品参数信息
					productCommonts:[],
					chooseSkuProps:{}, //用于记录选择的套餐属性
					num:1,//用于记录商品的购买数量
					token:"",
					isLogin:false,
					username:null,
				},
				created:function (){
					//获取用户名称
					var username = getCookieValue("username");
					this.username=username;
					if (username!=null){
						this.isLogin=true;
					}
					//从url中获得传递过来的productId
					this.productId=getUrlParam("pid");
					//根据商品id来查询商品的基本信息(商品基本信息、商品图片、商品skus)
					var getDetailProductsUrl=baseUrl+"/getDetailProducts";
					axios.post(getDetailProductsUrl,{
						productId:this.productId
					}).then((res)=>{
						this.product=res.data.data.product;
						this.productImgs=res.data.data.productImgs;
						this.productSkus=res.data.data.productSkus;
						//skuProps默认显示第一个套餐的属性
						var str = this.productSkus[0].untitled;
						this.skuProps=eval("("+str+")");//把str转换成对象
					});

					//根据商品id来获得商品的参数
					var getProductParamsUrl=baseUrl+"/getProductParams";
					axios.post(getProductParamsUrl,{
						productId:this.productId
					}).then((res)=> {
						if (res.data.code == 200){
							this.productParams = res.data.data;
						}
					});

					//根据商品id来获得商品的评论
					var getProductCommentsUrl=baseUrl+"/getProductComments";
					axios.post(getProductCommentsUrl,{
						productId:this.productId
					}).then((res)=>{
						this.productCommonts=res.data.data;
					});
				},

				/*渲染放大镜的效果*/
				updated:function(){
					//每次重新渲染之后执行
					//====>初始化放大镜效果
					$(".jqzoom").imagezoom();
					$("#thumblist li a").click(function() {
						$(this).parents("li").addClass("tb-selected").siblings().removeClass("tb-selected");
						$(".jqzoom").attr('src', $(this).find("img").attr("mid"));
						$(".jqzoom").attr('rel', $(this).find("img").attr("big"));
					});
					// //初始化套餐属性的选择效果
					//商品规格选择
					// initChoose();
				},
				methods:{
					changeSku:function (event) {
						//获取点击的套餐的索引
						this.currentSkuIndex = event.srcElement.dataset.index;
						var str = this.productSkus[this.currentSkuIndex].untitled;
						this.skuProps = eval("("+str+")");
					},
					changeProp:function (event){
						// this.chooseSkuProps={};
						// console.log(event.srcElement.dataset);
						var key = event.srcElement.dataset.key;
						var v = event.srcElement.dataset.v;
						this.chooseSkuProps[key]=v;
						//选择效果：
						$("li[name='"+key+"']").removeClass("selected");
						//让点击的选项有选中效果
						$("li[name='"+key+"'][data-v='"+v+"']").addClass("selected");
						console.log("res:");
						console.log(this.chooseSkuProps);
					},
					changeNum:function (m){
						if (m==-1&&this.num>1){
							this.num=this.num-1;
						}else if (m==1&&this.num<this.productSkus[this.currentSkuIndex].stock) {
							this.num=this.num+1;
						}
					},

					//添加购物车
					addShopCart:function () {
						//套餐属性转换成字符串
						var token = getCookieValue("token");
						var ueserId=getCookieValue("userId");
						if (token==null){
							var flag = confirm("请先登录");
							if (flag==true) {
								window.location.href = "login.html";
							}else {
								window.location.href = "index.html";
							}
						}else {
							this.token=token;
						}
						var propStr = "";
						for(var key in this.chooseSkuProps){
							propStr+= key+":"+  this.chooseSkuProps[key] +";";
						}
						//购物车信息
						var shoppingCartVO={
							"cartNum": this.num,
							"productId": this.productId,
							"productPrice": this.productSkus[this.currentSkuIndex].sellPrice,
							"skuId": this.productSkus[this.currentSkuIndex].skuId,
							"skuProps":propStr ,
							"userId": ueserId,
						};

						//从cookie中获取token
						var token=getCookieValue("token");
						console.log("shopCart:");
						console.log(shoppingCartVO);

						var addShoppingCartUrl="http://127.0.01:8080/haitaobao/shoppingCart/addShoppingCart";
						axios({
							url:addShoppingCartUrl,
							method:"post",
							headers:{
								token:token,
							},
							data:shoppingCartVO,
						}).then((res)=>{
							if (res.data.code==200){
								layer.msg("添加购物车成功!")
							}else {
								layer.msg("添加购物车失败!")
							}
						});
					},
				},
				watch:{
					skuProps:function (){
						this.chooseSkuProps={};
						for (var key in this.skuProps){
							this.chooseSkuProps[key]=this.skuProps[key][0];
						}
						console.log("res:");
						console.log(this.chooseSkuProps);
					}
				}
			});
		</script>
	</body>

</html>